<template>
  <InfoCard v-bind="cardProp" @click="jumpToPage">
    <template #header-tag>
      <div class="flex gap-1">
        <div v-if="isEmergency" class="tag bg-[#ff0000] !w-[25px]">急</div>

        <div class="tag" :style="{ background: tagBgColor }" v-html="tagHtml"/>
      </div>
    </template>
  </InfoCard>
</template>

<script lang="js">
import {defineComponent} from "vue";
import InfoCard from "@/components/rjhz/info-card/InfoCard.vue";

export default defineComponent({
  name: "QianzhikongCard",
  components: {InfoCard},
  props: {
    uuid: String,
    emergency: String,
    approveProcess: String,
    approveProcessStr: String,
    serialNumber: String,
    consultationTypeStr: String,
    consultationWayStr: String,
    patientName: String,
    applyInstitutionNameTag: String,
    applyHospitalName: String,
    applyInstitutionName: String,
    applyDate: String,
    ensureTimeAndAddress: String,
    serverHospAndDeptAndDocStr: String,
  },
  data() {
    return {};
  },
  computed: {
    cardProp() {
      return {
        title: this.applyInstitutionName,
        filedList: [
          {
            label: '序号',
            value: this.serialNumber
          },
          {
            label: '申请时间',
            value: this.applyDate
          },
          {
            label: '会诊来源',
            value: this.applyInstitutionNameTag
          },
          {
            label: '类型',
            value: this.consultationTypeStr
          },
          {
            label: '会诊方式',
            value: this.consultationWayStr
          },
          {
            label: '患者姓名',
            value: this.patientName
          },
          {
            label: '会诊信息',
            value: this.serverHospAndDeptAndDocStr
          },
          {
            label: '会诊时间及地点',
            value: this.ensureTimeAndAddress
          },
        ]
      }
    },
    isEmergency() {
      return this.emergency === '是';
    },
    tagBgColor() {
      let tagBgColor = '#2cd1c6';
      if (this.approveProcessStr.includes('退回')) {
        tagBgColor = '#ff0000'
      }
      if (this.approveProcessStr.includes('已完成')) {
        tagBgColor = '#a8a8a8'
      }
      return tagBgColor;
    },
    tagHtml() {
      const str = '</span>';
      const indexOf = this.approveProcessStr.indexOf(str);
      return this.approveProcessStr.slice(0, indexOf + str.length)
    },
  },
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  methods: {
    jumpToPage() {

    }
  },
  // vue3
  beforeUnmount() {},
  unmounted() {},
});
</script>

<style scoped lang="scss">
:deep(.approveProcessStr) {
  color: white !important;
}

.tag {
  width: 52px;
  height: 25px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  line-height: normal;
  font-weight: bold;
  color: #fff;
}
</style>
